<template>
	<view class="content">
	    <ranTitle text="官方榜"></ranTitle>
		<template v-if="allData.list">
			<ranContent v-for="(item,index) in allData.list.slice(0,4)" :key="item.id" :data="item"></ranContent>
		</template>
		
		<ranTitle text="全球榜"></ranTitle>
		<template v-if="allData.list">
			<ranSpeed :data="allData.list.slice(4)"></ranSpeed>
		</template>
		
	</view>
</template>

<script>
	import { ranData } from '@/api/music.js';
	import ranTitle from '@/components/ranTitle/ranTitle.vue';
	import ranContent from '@/components/ranTitle/ranContent.vue';
	import ranSpeed from '@/components/ranTitle/ranSpeed.vue';
	export default {
		data() {
			return {
				allData:{}
			}
		},
		created() {
			ranData().then(res=>{
				// console.log(res);
				this.allData = res.data;
				console.log(this.allData);
			})
		},
		methods: {

		},
		components:{
			ranTitle,
			ranContent,
			ranSpeed
		}
	}
</script>

<style>
	
</style>
